<template>
    <el-dialog
        v-model="userRoleAuthorisationDialogVisible"
        title="用户授权"
        width="40%"
        align-center
        :show-close="true"
        :close-on-click-modal="false"
        @close="closeDialog"
    >
        <el-input v-model="searchInfo" style="width: 50%" placeholder="搜素角色" clearable @input="searchInfoChange()"/>
        <el-button type="primary" style="margin-left: 2%" :loading="saveLoading" @click="saveRolePermission()">保 存</el-button>
        <el-table
            :data="roleFilterInfoList"
            style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
            row-key="id"
            border
            :stripe="true"
            :show-overflow-tooltip="true"
            ref="tableRef"
            class="tableContainer"
            max-height="50vh"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" :reserve-selection="true"/>
            <el-table-column prop="roleCode" label="角色Code" />
            <el-table-column prop="roleName" label="角色名称" />
            <el-table-column prop="roleDescription" label="角色描述" />
        </el-table>
    </el-dialog>

</template>

<script>
import {roleInfoQuery, userRoleAuthInfoCreate, userRoleInfoQuery} from "@/request/role";
import {ElNotification} from "element-plus";

export default {
    name: "UserRoleAuthorisationDialog",
    props: ['userRoleAuthorisation'],
    data() {
        return {
            roleInfoList: [],
            roleFilterInfoList: [],
            searchInfo: '',
            selectListInfo: [],
            saveLoading: false
        }
    },
    methods: {
        closeDialog() {
            this.$store.commit('changeUserRoleAuthorisationDialogVisible', false);
        },
        handleSelectionChange(val) {
            this.selectListInfo = val;
        },
        searchInfoChange() {
            this.roleFilterInfoList = [];
            // 遍历所有数据，查询出符合条件的数据
            this.roleInfoList.forEach(res => {
                if (res.roleCode.includes(this.searchInfo) || res.roleName.includes(this.searchInfo)) {
                    this.roleFilterInfoList.push(res)
                }
            })
        },
        saveRolePermission() {
            this.saveLoading = true
            // 拼接参数
            let requestInfo = []
            this.selectListInfo.forEach(res => {
                let requestInfoItem = {
                    userId: this.userRoleAuthorisation.id,
                    roleId: res.id
                }
                requestInfo.push(requestInfoItem);
            })
            userRoleAuthInfoCreate(requestInfo).then(res => {
                if (res.code === '200') {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success'
                    });
                    this.$store.commit('changeUserRoleAuthorisationDialogVisible', false);
                }
                this.saveLoading = false
            }).catch(res => {
                this.saveLoading = false
            })
        }
    },
    computed: {
        userRoleAuthorisationDialogVisible() {
            return this.$store.state.userRoleAuthorisationDialogVisible;
        }
    },
    updated() {
        this.$refs.tableRef.clearSelection(false);
        let requestInfo = {
            userId: this.userRoleAuthorisation.id
        }
        userRoleInfoQuery(requestInfo).then(res => {
            if (res.code === '200') {
                res.data.forEach(info => {
                    for (let i = 0; i < this.roleFilterInfoList.length; i++) {
                        if (this.roleFilterInfoList[i].id === info.id) {
                            this.$refs.tableRef.toggleRowSelection(this.roleFilterInfoList[i], true);
                        }
                    }
                })
            }
        })
        this.searchInfo = '';
        this.searchInfoChange();
    },
    created() {
        let info = {
            pageInfo: {
                pageIndex: 1,
                pageSize: 10000
            }
        }
        roleInfoQuery(info).then(res => {
            this.roleInfoList = res.data.dataList
            this.roleFilterInfoList = res.data.dataList
        })
    }
}
</script>

<style scoped lang="less">

</style>